<template>
  <div>
    <div class="list-btn">
      入催日期:<DatePicker type="date" @on-change="startTime" :options="options" placeholder="选择开始日期" style="width: 200px" ></DatePicker>
      ～<DatePicker type="date" @on-change="endTime" :options="options" placeholder="选择结束日期" style="width: 200px"  ></DatePicker>
    </div>
    <!--<div class="list-btn">
      渠道:
      <Select clearable style="width:200px" v-model="params.channelCode" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option v-for="(item,index) in channelCodeList" :value="item.channelCode" :key="index">{{ item.channelName }}</Option>
      </Select>
    </div>-->
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list"  :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    methods:{

    },
    data () {
      return {
        tag: {
          'title': '客户催收率',
          'path': '/work/urgeRate/list'
        },
        sysUser:[],
        statusList:[
          {
            id: 0,
            name:'未分配'
          },
          {
            id: 1,
            name: '已分配'
          }
        ],
        listTitle: [
          {
            title: '放款日期',
            minWidth: 80,
            key: 'borrowTime',
            align:'center',
            render:(h,params) => {
              return h('div', params.row.borrowTime ? this.getLocalDate(params.row.borrowTime) : "—")
            }
          },
          {
            title: '入催日期',
            key: 'repayTime',
            minWidth:80,
            align:'center',
            render:(h,params) => {
              return h('div', params.row.repayTime ? this.getLocalDate(params.row.repayTime) : "—")
            }
          },
          {
            title: '入催单数',
            key: 'collectionNum',
            minWidth:80,
            align:'center'
          },
          {
            title: '已还单数',
            key: 'repaidNum',
            minWidth:80,
            align:'center'
          },
          {
            title: '待回收(待回收/逾期)',
            key: 'waitRecoveryRate',
            minWidth:80,
            align:'center',
            render:(h,params) => {
              return h('div',this.toRate(params.row.waitRecoveryRate))
            }
          },
          {
            title: '回收率',
            key: 'riskControllerNumber',
            align:'center',
            children: [
              {
                title: '1天',
                key: 'day1Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day1Rate))
                }
              },
              {
                title: '2天',
                key: 'day2Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day2Rate))
                }
              },
              {
                title: '3天',
                key: 'day3Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day3Rate))
                }
              },
              {
                title: '4天',
                key: 'day4Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day4Rate))
                }
              },
              {
                title: '5天',
                key: 'day5Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day5Rate))
                }
              },
              {
                title: '6天',
                key: 'day6Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day6Rate))
                }
              },
              {
                title: '7天',
                key: 'day7Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day7Rate))
                }
              },
              {
                title: '8天',
                key: 'day8Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day8Rate))
                }
              },
              {
                title: '9天',
                key: 'day9Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day9Rate))
                }
              },
              {
                title: '10天',
                key: 'day10Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day10Rate))
                }
              },

              {
                title: '1～10天',
                key: 'day1To10Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day1To10Rate))
                }
              },
              {
                title: '11～15天',
                key: 'day11To15Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day11To15Rate))
                }
              },
              {
                title: '16～30天',
                key: 'day16To30Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day16To30Rate))
                }
              },
              {
                title: '>30天',
                key: 'day30Rate',
                minWidth:70,
                align:'center',
                render:(h,params) => {
                  return h('div',this.toRate(params.row.day30Rate))
                }
              },
              {
                title: '操作',
                key: 'action',
                align:'center',
                width: 100,
                render: (h, params) => {
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'info',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.$router.push({path:'/work/urgeRate/detail',query:{repayTimeStr:params.row.repayTime}})
                        }
                      }
                    }, '详情'),
                  ]);
                }
              },
            ]
            /*,
            render: (h, params) => {
              return h('div', this.toYuan(params.row.loanMoney))
            }*/
          },
        ],
        url: '/statistics/collection',
        nameListUrl: '',
        params: {
          //status:'',
          pageCurrent: 1,
          pageLimit: 10
        },

      }
    },
    mounted() {
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }
/deep/ .ivu-table-cell{
  padding-left:8px;
  padding-right:8px;
}
</style>
